<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>approval-process-fe</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<script>
  let browser = {
    versions: function () {
      let u = navigator.userAgent, app = navigator.appVersion;
      return {//移动终端浏览器版本信息
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
      };
    } (),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
  }
  // 这个标志全局都会使用
  let flag = false;
  // 如果是移动端flag = true
  if ((browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad)) {
    flag = true;
  }
  (function() {
    // 实现自适应问题移动端375标准 (.16px === 16xp)， pc端1920 * 1080标准
    function remChange() {
      const html = document.querySelector('html')
      const width = html.getBoundingClientRect().width
      console.log(width, width);
      if (flag) {
        html.style.fontSize = width / 3.75 + 'px'
      } else {
        html.style.fontSize = width / 19.2 + 'px'
      }
    }
    // 移动端才动态设置fontsize，进行适配
    remChange()
    window.addEventListener('resize', remChange)
	})();
</script>